<template>
    <div class="container">
        <div class="editor-header">
            <div class="super-editor-button-box" @click="handleClick" v-show="buttonShow">
                <el-icon>
                    <ArrowRightBold />
                </el-icon>
            </div>
            <div class="super-editor-title">消息</div>
        </div>
        <div class="message-body">
            <div class="message-title">
                {{ currentItem.title }}
            </div>
            <div class="message-info super-editor-flex-center">
                <div class="message-url">
                    <a :href="currentItem.url" target="_blank">{{ currentItem.site }}</a>
                </div>
                
                <div class="message-dataset">
                    <a :href="currentItem.url" target="_blank"> {{ currentItem.dataset_name }}</a>
                </div>

                <div class="message-created">{{ currentItem.created }}</div>
            </div>
            <!-- <div class="message-action">
                <el-button type="primary" @click="handleClick">在笔记中修改</el-button>
                <el-button type="primary" @click="handleClick">复制到笔记</el-button>
            </div> -->

            <!-- <div class="message-site">{{ currentItem.site }}</div> -->
            <!-- <div class="message-dataset">{{ currentItem.dataset }}</div> -->
            <div class="msssage-content" v-html="currentItem.content"></div>

        </div>

    </div>
</template>

<script setup>
import { ref } from 'vue'
import { emitter } from '@/global.js'
const currentItem = ref({})
const buttonShow = ref(false)
emitter.on('clickMsg', (item) => {
    // console.log(item)
    currentItem.value = item
})
</script>

<style lang="css" scoped>
.editor-header {
    height: var(--supereditor-header-height);
    line-height: var(--supereditor-header-height);
    display: flex;
    align-items: center;
    padding-left: 5px;
    gap: 10px;
    font-size: large;
    font-weight: bold;
    border-bottom: 1px solid #eee;
}

.super-editor-title {
    padding-left: 5px;
}

.message-body {
    padding: 10px;
}

.message-title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

.message-info {
    gap: 10px;
    padding: 10px;
}
.message-action{
    display: flex;
    justify-content: center;
    gap: 10px;
}

.message-dataset{
    background-color: pink;
}
</style>